<template>
  <div class="flat-date-picker">
    <div class="date-picker-title">
      <i class="el-icon-date"></i> {{ title || '选择时间范围' }}
    </div>
    <div class="date-picker-content">
      <div class="date-range-picker">
        <el-date-picker
          v-model="dateRange"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期时间"
          end-placeholder="结束日期时间"
          :picker-options="pickerOptions"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          @change="handleDateChange"
        />
      </div>
      <div class="quick-buttons">
        <el-button size="small" @click="selectLast24Hours">最近24小时</el-button>
        <el-button size="small" @click="selectLast7Days">最近7天</el-button>
        <el-button size="small" @click="selectLast30Days">最近30天</el-button>
        <el-button type="primary" size="small" @click="handleSearch">
          <i class="el-icon-search"></i> 查询
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FlatDatePicker',
  props: {
    title: {
      type: String,
      default: ''
    },
    value: {
      type: Array,
      default: () => [new Date(), new Date()]
    }
  },
  data() {
    return {
      dateRange: this.value,
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }
        ]
      }
    };
  },
  watch: {
    value: {
      handler(newVal) {
        if (newVal && newVal.length === 2) {
          this.dateRange = newVal;
        }
      },
      deep: true
    }
  },
  methods: {
    handleDateChange(val) {
      this.$emit('input', val);
      this.$emit('change', val);
    },
    handleSearch() {
      if (!this.dateRange || this.dateRange.length !== 2) {
        this.$message.warning('请选择有效的时间范围');
        return;
      }
      this.$emit('search', this.dateRange);
    },
    selectLast24Hours() {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24);
      this.dateRange = [start, end];
      this.handleDateChange(this.dateRange);
      this.handleSearch();
    },
    selectLast7Days() {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      this.dateRange = [start, end];
      this.handleDateChange(this.dateRange);
      this.handleSearch();
    },
    selectLast30Days() {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      this.dateRange = [start, end];
      this.handleDateChange(this.dateRange);
      this.handleSearch();
    }
  }
};
</script>

<style scoped>
/* 扁平化日期选择器样式 */
.flat-date-picker {
  display: flex;
  flex-direction: column;
  background: linear-gradient(120deg, #f0f6ff 60%, #e6f0ff 100%);
  border-radius: 16px;
  box-shadow: 0 2px 12px 0 rgba(60,120,255,0.08);
  padding: 20px;
  margin-bottom: 20px;
  transition: box-shadow 0.3s;
}

.flat-date-picker:hover {
  box-shadow: 0 8px 32px 0 rgba(60,120,255,0.18);
}

.date-picker-title {
  font-size: 16px;
  font-weight: 600;
  color: #409EFF;
  margin-bottom: 15px;
}

.date-picker-content {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.date-range-picker {
  flex: 1;
  min-width: 350px;
}

.date-range-picker .el-date-editor {
  width: 100%;
}

.quick-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.quick-buttons .el-button {
  padding: 7px 15px;
  border-radius: 20px;
  font-size: 13px;
}

.quick-buttons .el-button--primary {
  background: linear-gradient(90deg, #409EFF 0%, #67C23A 100%);
  border: none;
  box-shadow: 0 2px 6px rgba(32, 160, 255, 0.3);
}

/* 自定义日期选择器颜色 */
.flat-date-picker .el-date-editor--daterange.el-input__inner {
  border-radius: 8px;
  border: 1px solid #dcdfe6;
  background-color: #fff;
  transition: all 0.3s;
}

.flat-date-picker .el-date-editor--daterange.el-input__inner:hover {
  border-color: #c0c4cc;
}

.flat-date-picker .el-date-editor--daterange.el-input__inner:focus {
  border-color: #409EFF;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

/* 响应式布局 */
@media (max-width: 768px) {
  .date-picker-content {
    flex-direction: column;
    align-items: stretch;
  }
  
  .date-range-picker {
    min-width: auto;
  }
}
</style> 